JavaScript Form Validation

This example demonstrates basic form validation using JavaScript.

        
<form id="myForm" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>

<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>

<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>

<input type="submit" value="Submit">
</form>

<script>
function validateForm() {
const username = document.getElementById('username').value.trim();
const email = document.getElementById('email').value.trim();
const age = document.getElementById('age').value.trim();

// Check if username is filled
if (username === "") {
    alert("Username must be filled out");
    return false;
    }

// Email validation pattern
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// Check if email is valid
if (!emailPattern.test(email)) {
    alert("Please enter a valid email address");
    return false;
    }

// Convert age to a number
const ageNumber = Number(age);
// Check if age is valid
if (isNaN(ageNumber) || ageNumber < 1 || ageNumber> 120) {
    alert("Please enter a valid age between 1 and 120");
    return false;
    }

// All validations passed
return true;
}
</script>